<template>
  <!-- <div id="app" v-loading="loading" :element-loading-text="loadingText"> -->
  <div id="app">
    <router-view v-if="hasPermissions" />
  </div>
</template>

<script>
import { getPermissions, getCityList } from '@/api/user'
import { routes } from '@/router/routes'
import { calcPermissions } from './utils/permissions'
import { mapActions } from 'vuex'
import { constant } from '@/router/route/constant'
import { mapState } from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      hasPermissions: false
    }
  },
  computed: {
    ...mapState('app', ['loading', 'loadingText'], 'userInfo')
  },
  async created() {
    document.getElementsByTagName('body')[0].style.zoom=0.9;
    try {
      // console.log(this.$store.getters.userInfo)
      // let user = this.$store.getters.userInfo
      await this.getUserInfo()
      const res = await getPermissions()
      this.hasPermissions = true
      this.$store.dispatch('myClient/customerFieldList')
      if (!res.result) {
        this.$router.options.routes = [
          ...this.$router.options.routes,
          ...constant
        ]
        this.$router.addRoutes(constant)
        return
      }
      const tempList = res.data.map((item) => {
        return {
          ...item,
          children: item.childList
        }
      })
      console.log(tempList)
      const list = calcPermissions(tempList, routes)
      this.$router.options.routes = [
        ...this.$router.options.routes,
        ...list,
        ...constant
      ]
      this.$router.addRoutes([...list, ...constant])
      this.getCityList()
      console.log('======权限======')
      //console.log(this.$router.options.routes)
    } catch (error) {
      this.hasPermissions = true
      console.log(error)
    }
  },
  methods: {
    ...mapActions('app', ['setCityList']),
    ...mapActions('user', ['getUserInfo']),
    async getCityList() {
      const res = await getCityList()
      if (!res.result) return
      this.setCityList(
        res.data.map((item) => {
          return {
            value: item,
            label: item
          }
        })
      )
    }
  }
}
</script>

<style lang="scss">
/* 修复table不对齐问题 */
.el-table th.gutter {
  display: table-cell !important;
}

.link_groups {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}

.el_table {

  th,
  td {
    padding: 10px 4px !important;
  }

  thead {
    th {
      .cell {
        line-height: initial !important;
      }
    }
  }

  td {
    padding: 8px 4px !important;
  }
}

.tab_el_tag {
  margin: 2px;
}

.r_p {
  margin: 0;
  padding: 0;
}

.params_list {
  display: flex;
  flex-wrap: wrap;
}

.static_tips {
  font-size: 14px;
  color: #f00;
  padding: 0 0 10px 0;
  display: flex;
  align-items: center;

  .underline {
    text-decoration: underline;
    cursor: pointer;
    margin: 0 4px;
  }
}

@import '@/styles/base.scss';
</style>
